import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
// 从插件中导入 createSvgIconsPlugin 函数
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
// 如果你需要 PWA 功能，请先安装插件: npm install -D vite-plugin-pwa
// 然后取消下面的注释
// import { VitePWA } from 'vite-plugin-pwa';

// Vite 配置文件官方文档: https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  // 加载当前模式下的环境变量
  const env = loadEnv(mode, process.cwd())

  const IS_PROD = ['production', 'prod'].includes(mode)

  return {
    /**
     * base: 对应 vue.config.js 的 publicPath
     * 生产环境下使用相对路径 './'，其他环境使用根路径 '/'
     */
    base: IS_PROD ? './' : '/',

    plugins: [
      vue(),
      // ================== 第二步：在 plugins 数组中添加配置 ==================
      // 调用 createSvgIconsPlugin 函数并传入配置对象
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹的路径
        // path.resolve(process.cwd(), 'src/icons/svg') 会解析出一个绝对路径
        // process.cwd() 返回 Node.js 进程的当前工作目录
        iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')],

        // 指定 symbolId 的格式
        // 'icon-[dir]-[name]' 是一个很好的默认值，它能确保图标ID的唯一性
        // [dir] 会被替换为 svg 文件所在的文件夹名称 (如果有的话)
        // [name] 会被替换为 svg 文件的名称 (不含 .svg 后缀)
        symbolId: 'icon-[name]', // 为了简化，我们这里只用文件名
      }),
    ],

    resolve: {
      alias: {
        // 关键在这里：
        // 定义一个名为 '@' 的别名
        // 让它指向当前项目根目录下的 'src' 文件夹
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
      // vue.config.js 中的 symlinks: true 是 Vite 的默认行为，无需配置
    },

    /**
     * server: 对应 vue.config.js 的 devServer
     */
    server: {
      host: 'localhost', // 或 '0.0.0.0' 以允许网络访问
      port: 8888, // 端口号
      open: true, // 自动打开浏览器
      // cors: true,     // 如果需要，可开启跨域
      proxy: {
        // 使用 .env 文件中定义的基础路径作为代理前缀
        [env.VITE_APP_BASE_API]: {
          target: env.VITE_APP_URL, // 代理的目标地址 (你的后端服务)
          changeOrigin: true, // 需要虚拟主机站点
          ws: false, // 如果你的后端不支持 websocket，可以设置为 false
          secure: false, // 如果是 http 接口，需要设置为 false
          // 重写路径：将 /api 前缀替换为空字符串
          rewrite: (path) => path.replace(new RegExp(`^${env.VITE_APP_BASE_API}`), ''),
        },
      },
    },

    /**
     * css: 对应 vue.config.js 的 css 相关配置
     */
    css: {
      preprocessorOptions: {
        scss: {
          /**
           * additionalData: 对应 vue.config.js 的 style-resources-loader
           * 自动向每个 SCSS 文件注入全局变量和 mixin
           */
          // additionalData: `
          //   @import "@/styles/_variables.scss";
          //   @import "@/styles/_mixins.scss";
          // `,
          additionalData: `
            @use "@/styles/_mixins.scss" as *;
          `,
        },
      },
    },

    /**
     * build: 用于配置生产构建
     */
    build: {
      /**
       * sourcemap: 对应 vue.config.js 的 devtool: 'source-map'
       * 生产环境下是否生成 source map
       */
      sourcemap: mode === 'development' || mode === 'staging', // 只在特定环境开启
    },
  }
})
